<template>
	<view>
		<view style="padding-top:100upx;">
			<view style="height:80px;">
				<view class="login-input" :class="{ active: distinguish == true }">
					<input type="text" placeholder="当前服务器" v-model="IPhttp" placeholder-style="color:#fff" />
				</view>
				<text class="tips" v-show="distinguish">{{ UserNametips }}</text>
			</view>
			<!-- <view style="height:80px;">
				<view class="login-input" :class="{ active: distinguish == true }">
					<image src="../../static/yx-login/user.png"></image>
					<input type="text" placeholder="请输入企业账号" v-model="From.UserName" placeholder-style="color:#fff" />
					<image src="../../static/yx-login/delete.png" v-if="From.UserName" @click="From.UserName = ''" class="delete"></image>
				</view>
				<text class="tips" v-show="distinguish">{{ UserNametips }}</text>
			</view>
			<view style="height:80px;">
				<view class="login-input" :class="{ active: distinguish == true }">
					<image src="../../static/yx-login/user.png"></image>
					<input type="text" placeholder="请输入操作员编号" v-model="From.UserName" placeholder-style="color:#fff" />
					<image src="../../static/yx-login/delete.png" v-if="From.UserName" @click="From.UserName = ''" class="delete"></image>
				</view>
				<text class="tips" v-show="distinguish">{{ UserNametips }}</text>
			</view>

			<view style="height:80px;">
				<view class="login-input" :class="{ active: distinguish == true }">
					<image src="../../static/yx-login/password.png"></image>
					<input type="password" placeholder="请输入当前密码" v-model="From.PassWord" placeholder-style="color:#fff" v-if="SwiTch" />
					<input type="text" placeholder="请输入您要注册的密码" placeholder-style="color:#fff" v-model="From.PassWord" v-else />
					<image src="../../static/yx-login/delete.png" v-if="From.PassWord" @click="From.PassWord = ''" class="delete" style="margin-right:0px;width:22px;"></image>
					<image src="../../static/yx-login/yanjing.png" class="switch" @click="Switch()"></image>
				</view>
				<text class="tips" v-show="distinguish">{{ PassWordtips }}</text>
			</view> -->
		</view>
		<view class="login-button">
			<!-- <radio :checked="checked" @click="clickchecked" style="transform:scale(0.9)">记住密码</radio>
			<text class="register" @click="Jump">暂无账号点击注册</text> 
			<button @click="login">点击登录</button>-->
			<button @click="downLogin">退出登录</button>
			<view class="xfl-select">
				<xfl-select
					:list="list"
					:clearable="false"
					:showItemNum="5"
					:listShow="false"
					:isCanInput="true"
					:style_Container="'height: 50px; font-size: 16px;'"
					:placeholder="'placeholder'"
					:initValue="'设置服务端链接'"
					:selectHideType="'hideAll'"
					@change="onSelectChange"
				></xfl-select>
			</view>
		</view>
		<!-- bgmain-color -->
	
		<!-- 选择颜色模态框 -->

		<view class="padding">
			<!-- <view class="text-black">对比色：黑色</view> -->
			<view :class="'text-' + themeColor.name" @click="onComponent">主题色：{{ themeColor.title }}</view>
			<view class="wh20 f-center" :class="strClass" :style="{ '--index': index }"></view>
		</view>
		<view class="cu-list menu sm-border card-menu">
			<view class="cu-item">
				<view class="content flex align-center">
					<text class="cuIcon-colorlens" :class="'text-' + themeColor.name"></text>
					<view class="padding solid radius shadow-blur" :class="'bg-' + themeColor.name"></view>
				</view>
				<view class="action">
					<button class="cu-btn round shadow" @click="showColorModal" :class="'bg-' + themeColor.name">
						<text class="cuIcon-colorlens"></text>
						选择颜色
					</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="{ show: colorModal }">
			<view class="cu-dialog">
				<view class="cu-bar justify-end solid-bottom">
					<view class="content">选择颜色</view>
					<view class="action" @tap="colorModal = false"><text class="cuIcon-close text-red"></text></view>
				</view>
				<view class="grid col-5 padding">
					<view class="padding-xs" v-for="(item, index) in ColorList" :key="index" @tap="SetColor(item)" :data-color="item.name">
						<view class="padding-tb radius" :class="'bg-' + item.name">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</view>
		<view id="test" class=""></view>
	</view>
</template>

<script>
/* 本图标全部使用阿里图标,图标目录static yx-login */
import apiRequest from '@/api/request.js';
import api_server from '@/api/api_server.js';

import xflSelect from '../../components/xfl-select/xfl-select.vue';
import util from '@/common/util.js';
export default {
	components: {
		xflSelect
	}, //注册为子组件

	/*
		   // 或者在 main.js 中注册为全局组件
		   import xflSelect from './components/xfl-select/xfl-select.vue';
		    Vue.component('xfl-select', xflSelect);
		*/
	data() {
		return {
			index: 2,
			From: {
				UserName: '', //账号
				PassWord: '' //密码
			},
			checked: false, //单选框
			distinguish: false,
			UserNametips: '',
			PassWordtips: '',
			SwiTch: true,
			list: [
				//要展示的数据
				{
					value: '测试禁止选择',
					disabled: true
				}
			],

			colorModal: false, //选择颜色
			ColorList: [
				{
					title: '嫣红',
					name: 'red',
					color: '#e54d42',
					index: 1
				},
				{
					title: '桔橙',
					name: 'orange',
					color: '#f37b1d',
					index: 2
				},
				{
					title: '明黄',
					name: 'yellow',
					color: '#fbbd08',
					index: 3
				}
			],
			// themeColor:{}
			fromData: {
				cmd: 'AppLogin',
				version: '1.0',
				token: '',
				pageNo: 0,
				onePageNum: 10,
				Params: {
					usertype: 0,
					softid: '',
					oper_no: '',
					oper_pw: '',
					clientflag: 0
				}
			}
		};
	},

	onLoad() {
		this.list.push(apiRequest.IPdev);
		this.list.push(apiRequest.IPtest);
		this.list.push(apiRequest.IPservice);
	},

	// 读取本地存储密码及账号
	onShow() {
		// util.navigateTo({
		//  url:'/pages/tab2/index'
		// },function(str="../tab2/index"){
		//  console.log(str);
		// })
		//document.body[0].setAttribute("bg-color", 3);
		//document.body.style.setProperty('bg-color', 3 );
	},
	computed: {
		IPhttp() {
			var apiRequest = this.$store.getters.getApiRequest;
			return apiRequest.IPhttp;
		},
		themeColor() {
			var themeColor = this.$store.getters.getThemeColor;
			return themeColor;
		},
		strClass() {
			if (this.themeColor.index == 1) {
				return 'bg-Color-Blue';
			}
			if (this.themeColor.index == 2) {
				return 'bg-Color-red';
			}
			if (this.themeColor.index == 3) {
				return 'bg-Color-black';
			}
		}
	},
	methods: {
		onComponent(){
			this.$util.navigateTo({url:'/pages/Component'})
		},
		//切换颜色
		showColorModal() {
			this.colorModal = true;
		},
		SetColor(item) {
			this.colorModal = false;
			this.index = item.index;

			// let query = uni.createSelectorQuery().in(this);
			// let nodesRef = query.select('#bg-color');
			//nodesRef.target.setAttribute("bg-color",item.index);

			this.$store.commit('setThemeColor', item);

			//this.changeTabBar(item.color)
		},
		//选择ip下拉框
		onSelectChange(itme) {
			apiRequest.IPhttp = itme.newVal;
			this.$store.commit('setApiRequest', { IPhttp: apiRequest.IPhttp });
		},
		/*
				登录逻辑部分
				 */
		login() {
			var that = this;

			if (true) {
				api_server.userLoginCURD({
					data: {
						customerId: this.$store.state.userId
					},
					method: 'post',
					timeout: 5000,
					success(res) {
						console.log(res);
					},
					fail(error) {
						console.log(error);
					}
				});
			} else {
				this.UserNametips = '账号错误请重新填写';
				this.PassWordtips = '密码错误请重新填写';
				this.distinguish = true;
			}
		},
		downLogin(){
			var data = {
				"version": "1",
				"pageNo": 0,
				"onePageNum": 10,
				"Params": {
				}
			}
			api_server.dwzy_AppLogout({
				data:data,
				method: 'post',
				timeout: 5000,
				success:(res) =>{
					console.log(res);
					this.$store.commit('setUserInfo',{})
					this.$util.reLaunch({url:'/pages/login/login'})
					uni.showModal({
						title:"提示",
						content:"您已下线",
						confirmText:"朕知道了"
					})
				},
				fail(error) {
					console.log(error);
					this.$store.commit('setUserInfo',{})
					this.$util.reLaunch({url:'/pages/login/login'})
					uni.showModal({
						title:"提示异常",
						content:JSON.stringify(error),
						confirmText:"朕知道了"
					})
				}
			});
		},
		/* 记住密码用户第二次进入页面直接填充 */
		clickchecked() {
			var that = this;
			this.checked = !this.checked;
			if (that.checked == true) {
				if (that.From.UserName && that.From.PassWord) {
					uni.setStorage({
						key: 'UserInfo',
						data: that.From
					});
				}
			}
		},
		Delete() {
			this.From.UserName = '';
		},
		Delete2() {
			this.From.PassWord = '';
		},
		Jump() {
			uni.reLaunch({
				url: '../register/index'
			});
		},
		Switch() {
			this.SwiTch = !this.SwiTch;
		}
	}
};
</script>

<style lang="scss" vars="{ index }">
//@import url("index.scss"); 此写法无效
//@import "@/common/uni.scss";

@import '@/common/theme.scss';
@import '@/common/mixin.scss';

.bg-Color-Blue {
	// --index: 2;
	z-index: var(--index);
	//$AAAAA-----AA:var(--index);
	$index: 1 !default; //默认变量为1
	position: relative;
	// &::after {
	// 	position: absolute;
	// 	display: block;
		
	// 	content: $index + '';
	// 	color: #fff;
	// }

	@include bg-color($index);
}

.bg-Color-red {
	$index: 2 !default; //默认变量为1
	position: relative;
	// &::after {
	// 	position: absolute;
	// 	display: block;
	// 	content: $index + '';
	// 	color: #fff;
	// }

	@include bg-color($index);
}

.bg-Color-black {
	$index: 3 !default; //默认变量为1
	position: relative;
	// &::after {
	// 	position: absolute;
	// 	display: block;
	// 	color: #ffffff;
	// 	content: $index + '';
	// }

	@include bg-color($index);
}

// $index: 3 !default; //默认变量为1
.wh20 {
	width: 50upx;
	height: 50upx;
	border-radius: 10upx;
}
/* iphone6 7 8 plus */

.body {
	//background-color: blue;
	font-size: 1.25rem;
}
</style>
<style lang="less">
/* 背景图设置 */
page {
	width: 100%;
	height: 100%;
	//background-image: url("@/static/yx-login/timg.jpg");
	//background-repeat: no-repeat;
	background-color: #1cbbb4;
	background-size: 100% 100%;
}

.login-input {
	width: 85%;
	height: 63px;
	margin: 0px auto;
	border-bottom: 1px solid rgb(255, 255, 255);
	display: flex;

	input {
		width: 91%;
		border: none;
		height: 40px;
		color: rgb(255, 255, 255);
		padding-left: 15px;
		padding-right: 15px;
		font-size: 14px;
		margin-top: 25px;
		outline: none;
		-webkit-appearance: none;
		/*去除系统默认的样式*/
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		/* 点击高亮的颜色*/
	}

	image {
		width: 23px;
		height: 20px;
		margin-top: 35px;
	}

	.delete {
		width: 20px;
		height: 20px;
		margin-left: -20px;
	}

	.switch {
		width: 23px;
		height: 14px;
		padding-top: 3px;
	}
}

.login-button {
	width: 85%;
	margin: 0px auto;

	button {
		width: 100%;
		font-size: 15px;
		height: 40px;
		color: rgb(255, 255, 255);
		background-color: rgb(78, 110, 242);
		margin-top: 16px;
	}

	radio {
		font-size: 14px;
		color: rgb(255, 255, 255);
	}

	.register {
		font-size: 12px;
		color: rgb(255, 255, 255);
		float: right;
		padding-top: 10px;
		text-decoration: underline;
	}

	.xfl-select {
		margin-top: 20px;
	}
}

.active {
	color: rgb(245, 8, 8);
	border-bottom: 1px solid rgb(245, 8, 8);
}

.tips {
	color: rgb(245, 8, 8);
	font-size: 12px;
	display: initial;
	float: right;
	padding-right: 30px;
}
</style>
